<template>
  <div
    class="searchDetail"
    v-title
    :data-title="$t('router.searchResultTitle')"
  >
    <v-nav></v-nav>
    <album-list
      :listData="list.data"
      :diff="'album-box-kuke'"
      v-loading="fullscreenLoading"
    ></album-list>
    <nice-empty
      v-show="list.data == false && fullscreenLoading == false"
      :emptyText="$t('public.noData')"
    ></nice-empty>
    <div class="page-wrap">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.pNo"
        :page-size="params.pSize"
        background
        hide-on-single-page
        layout="total, prev, pager, next, jumper"
        :total="list.totalRows"
        :small="isMobile"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import vNav from "@/components/common/header/Nav";
import albumList from "@/components/common/albumList/Index";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      list: {},
      //数据载入动画
      fullscreenLoading: true,
      params: {
        productName: "2CHires", //产品名
        side: "OUTER", //内外部标识
        client: "ok3", //客户端
        pNo: 1, //第几页
        pSize: 20, //一页几条
      },
      flag: null,
      //是否禁止加载数据或分页
      // isPage: false,
    };
  },
  components: {
    vNav,
    albumList,
  },
  computed: {
    ...mapGetters(["searchForm", "isMobile"]),
  },
  watch: {
    "$route.params.keywords"(to, from) {
      if (to == from) {
        return;
      }
      this.summary();
    },
  },
  created() {},
  mounted() {
    if (this.$route.params.sort === "AS") {
      this.flag = "AS";
      this.searchAS();
    } else {
      this.flag = "summart";
      this.summary();
    }
  },
  methods: {
    //分页 每页条数
    handleSizeChange(val) {
      this.params.pSize = val;
      if (this.flag === "summart") {
        this.summary();
      } else if (this.flag === "AS") {
        this.searchAS();
      }
    },
    //当前页
    handleCurrentChange(val) {
      this.params.pNo = val;
      if (this.flag === "summart") {
        this.summary();
      } else if (this.flag === "AS") {
        this.searchAS();
      }
    },
    async summary() {
      this.fullscreenLoading = true;
      let res = await this.$api.user.summary({
        ...this.params,
        keywords: this.$route.params.keywords,
        platform:
          this.$route.name == "classicalSearchSummary"
            ? "kml"
            : this.$route.name == "nationalSearchSummary"
            ? "world"
            : this.$route.name == "jazzSearchSummary"
            ? "jazz"
            : "spoken",
      });
      if (res.code == "success") {
        this.list = res.data ? res.data : {};
        this.fullscreenLoading = false;
      } else {
        this.$message({
          showClose: true,
          message: res.msg,
          type: "error",
        });
      }
    },
    async searchAS() {
      this.fullscreenLoading = true;
      let res = await this.$api.user.highDensity({
        ...this.params,
        ...this.searchForm,
        platform:
          this.$route.name == "classicalSearchResult"
            ? "kml"
            : this.$route.name == "nationalSearchResult"
            ? "world"
            : this.$route.name == "jazzSearchResult"
            ? "jazz"
            : "spoken",
      });
      this.fullscreenLoading = false;
      if (res.code == "success") {
        this.list = res.data;
      } else {
        this.$message({
          showClose: true,
          message: res.msg,
          type: "error",
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>
